import './index.less';
import React, { useEffect, useState } from 'react';
import { Resizable } from 'react-resizable';
import { Input } from 'antd';
import { DatePicker, Space, Table } from 'antd';
import { request } from 'umi';
const { RangePicker } = DatePicker;
import { Select } from 'antd';
const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
export default function Index() {
  const [components, setComponents] = useState({});
  const [_id, setId] = useState('');
  const [apply, setApplys] = useState([
    //  总数据渲染
    {
      id: 1,
      anumber: '晚班',
      applyTime: ' ',
    },
    {
      id: 2,
      anumber: '中班',
      applyTime: ' ',
    },
    {
      id: 3,
      anumber: '早班',
      applyTime: ' ',
      status: '',
    },
    {
      id: 4,
      anumber: '正常班',
      applyTime: ' ',
    },
  ]);
  const [acolumns, setAcolumns] = useState([
    {
      title: '序号',
      key: 'id',
      width: 40,
      render: (text: any, record: any, index: any) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '排版名称',
      key: 'anumber',
      width: 40,
      dataIndex: 'anumber',
      ellipsis: true,
    },
    {
      title: '',
      dataIndex: 'applyTime',
      key: 'applyTime',
      ellipsis: true,
      width: 100,
    },
  ]);

  const ResizeableTitle = (props: any) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }
    return (
      <Resizable width={width} height={38} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index: any) =>
    (e: any, { size }: any) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setAcolumns(nextColumns);
    };
  const columns = acolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 100,
      onResize: handleResize(index),
    }),
  }));
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const stateData = () => {
    // request('/api/ljf/apply').then((res) => {
    //   setApplys(res.apply);
    // });
    // setApplys(data);

    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  };
  useEffect(() => {
    stateData();
  }, []);

  return (
    <div className="arrange">
      <div className="arrange_header">
        <ul>
          <li>
            <button>新增</button>
          </li>
          <li>
            <button>修改</button>
          </li>
          <li>
            <button>过滤</button>
          </li>
          <li>
            <button>还原</button>
          </li>
          <li>
            <button>打印</button>
          </li>
          <li>
            <button>导入</button>
          </li>
          <li>
            <button>导出</button>
          </li>
          <li>
            <button>查看日志</button>
          </li>
        </ul>
      </div>
      <div className="arrange_control">
        <Table
          style={{ marginBottom: '20px' }}
          components={components}
          columns={columns}
          pagination={false}
          bordered
          rowKey="_id"
          scroll={{
            x: 1278,
            y: 460,
          }}
          rowSelection={rowSelection}
          onRow={(record, index) => {
            return {
              onClick: (e) => {
                let tr = e.target?.parentNode;
                for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                  tr.parentNode.childNodes[i].style.color = 'black';
                }
                tr.style.color = '#e17009';
              },
            };
          }}
          dataSource={apply}
        />
      </div>
    </div>
  );
}
